import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { TreeSelect, Table,Card } from "antd";
import { getDepartmentByHoscode, getFindScheduleList, getScheduleRule } from "@/api/hosp";
const { TreeNode } = TreeSelect;
type TTreeNode = typeof TreeNode;

function Department() {
    const { hoscode } = useParams();
    const [keys, setKeys] = useState("-1");
    // 储蓄排版列表
    const [bookingScheduleList, setBookingScheduleList] = useState<any[]>([]);
    const [pageInfo, setPageInfo] = useState({
        current: 1,
        total: 1,
        pageSize: 5
    });
    // 科室编号
    const [depCode, setDepCode] = useState("");
    const [departmentList, setDepartmentList] = useState([]);
    const getScheduleRuleAsync = function (current: number, pageSize: number, depcode: string) {
        getScheduleRule(current, pageSize, hoscode as string, depcode).then(value => {
            console.log(value);

            setBookingScheduleList(value.data.bookingScheduleList.map((v:any) => {
                v.scheduleList = [];
                return v;
            }));
            setPageInfo({
                current,
                pageSize,
                total: value.data.total
            })

        })
    }
    useEffect(() => {
        getDepartmentByHoscode(hoscode as string).then(value => {
            console.log(value);
            setDepartmentList(value.data);
        })
    }, [])
    return (
        <div>
            <TreeSelect
                showSearch
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                placeholder="请选择医院科室"
                allowClear
                filterTreeNode={(inputValue: string, treeNode: any) => {
                    return treeNode.title.includes(inputValue);
                }}
                onChange={(code) => {
                    setDepCode(code);
                    getScheduleRuleAsync(1, 5, code);
                }}
            >
                {
                    departmentList.map((item: any) => (
                        <TreeNode
                            selectable={false} key={item.depcode}
                            value={item.depcode} title={item.depname}
                        >
                            {
                                item.children.map((item: any) => (
                                    <TreeNode key={item.depcode}
                                        value={item.depcode} title={item.depname}
                                    />
                                ))
                            }

                        </TreeNode>
                    ))
                }

            </TreeSelect>
            <Table
                rowKey={"workDate"}
                pagination={{
                    ...pageInfo,
                    onChange(current, pageSize) {
                        getScheduleRuleAsync(current, pageSize, depCode);
                    }
                }}
                bordered={true}
                expandable={{
                    onExpand(expandable, record: any) {
                        if (expandable) {
                            setKeys(record.workDate);
                            getFindScheduleList(hoscode as string, depCode, record.workDate).then(value => {
                                console.log(value);
                                setBookingScheduleList(bookingScheduleList.map((item: any) => {
                                    if (item.workDate === record.workDate) {
                                        item.scheduleList = value.data;
                                    }
                                    return item;
                                }))
                            })
                        } else {
                            setKeys("-1");
                        }
                    },
                    expandedRowKeys: [keys],
                    expandedRowRender(record) {
                        return (
                            <Card>
                                <Table
                                    rowKey={"id"}
                                    pagination={false}
                                    bordered={true}
                                    columns={[
                                        {
                                            title: "序号",
                                            align: "center",
                                            render(value, rows, index) {
                                                return index + 1
                                            }
                                        },
                                        {
                                            title: "号源时间",
                                            align: "center",
                                            dataIndex: "workDate"
                                        },
                                        {
                                            title: "预约总数",
                                            align: "center",
                                            dataIndex: "reservedNumber"
                                        },
                                        {
                                            title: "剩余预约数",
                                            align: "center",
                                            dataIndex: "availableNumber"
                                        },
                                        {
                                            title: "挂号费",
                                            align: "center",
                                            dataIndex: "amount"
                                        },
                                        {
                                            title: "技能擅长",
                                            align: "center",
                                            dataIndex: "skill"
                                        }
                                    ]}
                                    dataSource={record.scheduleList}
                                />
                            </Card>
                        )
                    }
                }}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(value, rows, index) {
                            return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
                        }
                    }, {
                        title: "医师数量",
                        align: "center",
                        dataIndex: "docCount"
                    }
                    , {
                        title: "号源时间",
                        align: "center",
                        dataIndex: "workDate"
                    }
                    , {
                        title: "预约总数",
                        align: "center",
                        dataIndex: "reservedNumber"
                    }, {
                        title: "剩余预约数",
                        align: "center",
                        dataIndex: "availableNumber"
                    }
                ]}
                dataSource={bookingScheduleList}
            ></Table>
        </div>
    )
}

export default Department;